<template>
	<div>
		<Breadcrumb>
			<BreadcrumbItem>账号管理</BreadcrumbItem>
			<BreadcrumbItem>机器组列表</BreadcrumbItem>
		</Breadcrumb>
		<Form>
			<FormItem>
				<Button type="primary" @click="add" style="margin-right: 10px">分配机器组</Button>
				<Button type="primary" @click="$router.go(-1)" style="margin-right: 10px">返回</Button>
			</FormItem>
		</Form>

		<div class="form_box">
			<Table :columns="columns1" :data="tableData">
				<template slot-scope="{ row }" slot="status">
					<Tag color="success" v-if="row.status == 1" @click.native="setStatus(row.id,2)">启用</Tag>
					<Tag color="error" v-if="row.status == 2" @click.native="setStatus(row.id,1)">禁用</Tag>
				</template>
				<template slot-scope="{ row }" slot="option">
					<Button type="primary" size="small" style="margin-right: 5px" @click="$router.push('/account/teamLook')">查看</Button>
				</template>
			</Table>
		</div>


	<Modal v-model="modal1" title="分配机器组" @on-ok="confirm" @on-cancel="cancel" :mask-closable="false">
		<Form :label-width="110">
	
			<FormItem label="机器组">
				<Select clearable  placeholder="请选择" style="width: 120px;">
					<Option v-for="(item, index) in data1" :value="item.id" :key="index">{{item.title}}</Option>
				</Select>
			</FormItem>
	
		</Form>
	</Modal>
	
	</div>
</template>

<script>
	export default {
		data() {
			return {
				modal1:false,
				data1:[
					{
						id:1,
						title:'机器组3'
					},
					{
						id:2,
						title:'机器组4'
					}
				],
				columns1: [{
						title: "机器组名",
						key: "username",
						minWidth: 150,
						align: "center"
					},
					{
						title: "人数",
						key: "num",
						minWidth: 150,
						align: "center"
					},

					{
						title: "状态",
						slot: "status",
						minWidth: 150,
						align: "center"
					},

					{
						title: "创建时间",
						key: "create_time",
						minWidth: 150,
						align: "center"
					},

					{
						title: "操作",
						slot: "option",
						width: 200,
						align: "center",
						fixed: 'right',
					}
				],
				tableData: [{
					"id": "21",
					"num": "2",
					"username": "机器组1",
					"status": "1",
					"create_time": "2020-08-25 15:53:33",
				}, {
					"id": "22",
					"num": "2",
					"username": "机器组2",
					"status": "1",
					"create_time": "2020-08-25 15:53:33",
				}]
			}
		},
		methods: {
			confirm() {
				this.modal1 = false;
				this.$Message.success("保存成功！");
				this.cancel();
			},
			cancel(){
				
			},
			add() {
				this.modal1 = true;
			},
			setStatus(id, status) {
				var text = "确定要" + (status == 1 ? "启用" : "禁用") + "此机器组么？";
				this.$Modal.confirm({
					title: text,
					onOk: () => {
						this.$Message.success("操作成功");
				
					},
					onCancel: () => {}
				});
			},
		},

	}
</script>

<style>
</style>
